<template>

  <div class="qrcode-page">

    <!-- 关闭按钮：返回上一页（di8或di9） -->

    <button class="close-btn" @click="closePage">×</button>

    <!-- 标题 -->

    <h1 class="title">领取二维码</h1>

    <!-- 更多操作按钮程序 -->

    <span class="more-btn">...</span>



    <!-- 顶部校徽区域 -->

    <div class="header">

      <img src="/static/logo.png" alt="电子科技大学校徽" class="logo" />

      <p class="university-name">电子科技大学</p>

      <p class="university-english">University of Electronic Science and Technology of China</p>

    </div>




    <div class="content">

      <h2 class="student-type">本科生</h2>

      <p class="claim-title">扫码领取</p>

      <p class="claim-english">Scan to claim</p>

      <!-- 二维码图片 -->

      <img src="/static/tp/z2.png" alt="领取二维码" class="qrcode" />

      <p class="support-text">遇到问题请联系现场工作人员</p>

      <p class="support-english">For assistance, contact our on-site staff.</p>

      <!-- 协助代领按钮：点击跳转到di12 -->

      <div class="authorize-container">

        <span class="authorize-text">不在现场？</span>

        <button class="authorize-btn" @click="handleAuthorize">协助代领</button>

      </div>

      <p class="authorize-english">Can't attend? Authorize someone to pick up for you.</p>

      <!-- 缺货登记按钮 -->

      <button class="register-btn">缺货登记</button>



      <!-- 领取周边按钮：点击跳转到di11（已核销页） -->

      <button class="claim-btn" @click="navToDi11">领取周边</button>

    </div>





  </div>

</template>



<script setup>

import { ref } from 'vue';



// 关闭页面：返回上一页（di8或di9）

const closePage = () => {

  uni.navigateBack({

    delta: 1,

    success: () => {

      console.log('成功返回上一页（di8/di9）');

    },

    fail: (err) => {

      console.error('返回失败:', err);

      uni.showToast({ title: '返回失败，请重试', icon: 'none', duration: 1500 });

    }

  });

};



// 跳转到di11（周边已核销页）

const navToDi11 = () => {

  console.log('触发领取周边操作，准备跳转di11');

  uni.showToast({

    title: '领取请求已提交，即将进入核销确认页',

    icon: 'none',

    duration: 1500

  });



  // 延迟跳转，确保提示语被用户看到

  setTimeout(() => {

    uni.navigateTo({

      url: '/pages/index/shou_ye/di11',

      success: () => {

        console.log('成功跳转到di11（周边已核销页）');

      },

      fail: (err) => {

        console.error('跳转di11失败:', err);

        uni.showToast({ title: '跳转失败，请检查页面路径', icon: 'none', duration: 1500 });

      }

    });

  }, 1500);

};



// 协助代领按钮：跳转到di12（协助代领表单页）

const handleAuthorize = () => {

  console.log('点击协助代领，准备跳转di12');

  uni.showToast({

    title: '即将进入协助代领信息填写页',

    icon: 'none',

    duration: 1200

  });



  // 延迟跳转，优化交互流程

  setTimeout(() => {

    uni.navigateTo({

      url: '/pages/index/shou_ye/di12', // 目标页面地址（与需求一致）

      success: () => {

        console.log('成功跳转到di12（协助代领表单页）');

      },

      fail: (err) => {

        console.error('跳转di12失败:', err);

        uni.showToast({ title: '跳转失败，请检查路径 ', icon: 'none', duration: 1500 });

      }

    });

  }, 1200);

};

</script>



<style scoped>

/* 样式保持与原代码一致，此处省略重复样式 */

.qrcode-page {

  padding: 20px;

  position: relative;

  min-height: 100vh;

  box-sizing: border-box;

}



.close-btn {

  position: absolute;

  top: 20px;

  left: 20px;

  font-size: 24px;

  background: none;

  border: none;

  cursor: pointer;

}



.title {

  text-align: center;

  font-size: 20px;

  margin: 20px 0;

}



.more-btn {

  position: absolute;

  top: 20px;

  right: 20px;

  font-size: 24px;

  cursor: pointer;

}



.header {

  background-color: #005daa;

  color: #fff;

  padding: 15px;

  text-align: center;

  border-top-left-radius: 10px;

  border-top-right-radius: 10px;

}



.logo {

  width: 50px;

  height: 50px;

  margin-bottom: 10px;

}



.university-name {

  font-size: 18px;

  margin: 0;

}



.university-english {

  font-size: 14px;

  margin: 5px 0 0 0;

}



.content {

  background-color: #fff;

  padding: 30px;

  text-align: center;

}



.student-type {

  font-size: 24px;

  color: #005daa;

  margin-bottom: 20px;

}



.claim-title {

  font-size: 20px;

  margin-bottom: 5px;

}



.claim-english {

  font-size: 14px;

  color: #666;

  margin-bottom: 30px;

}



.qrcode {

  width: 200px;

  height: 200px;

  margin-bottom: 30px;

}



.support-text {

  font-size: 16px;

  margin-bottom: 5px;

}



.support-english {

  font-size: 14px;

  color: #666;

  margin-bottom: 20px;

}



.authorize-container {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-bottom: 5px;

}



.authorize-text {

  font-size: 16px;

  margin: 0;

}



.authorize-btn {

  padding: 8px 16px;

  background-color: #fff;

  border: 1px solid #005daa;

  color: #005daa;

  border-radius: 4px;

  cursor: pointer;

  font-size: 16px;

}



.authorize-btn:hover {

  background-color: #005daa;

  color: #fff;

  transition: all 0.2s ease;

}



.authorize-english {

  font-size: 14px;

  color: #666;

  margin-bottom: 30px;

}



.register-btn {

  padding: 10px 20px;

  background-color: #fff;

  border: 1px solid #005daa;

  color: #005daa;

  border-radius: 4px;

  cursor: pointer;

  margin-bottom: 15px;

}



.register-btn:hover {

  background-color: #005daa;

  color: #fff;

}



.claim-btn {

  padding: 12px 24px;

  background-color: #005daa;

  color: #fff;

  border: none;

  border-radius: 4px;

  font-size: 16px;

  cursor: pointer;

  width: 100%;

  max-width: 300px;

}



.claim-btn:hover {

  background-color: #004a8c;

}



.tech-support {

  text-align: center;

  font-size: 12px;

  color: #999;

  margin-top: 20px;

}

</style>